Vue 3 帶來了一個全新的響應式系統，這是它最引人注目的改進之一。這個新的響應式系統極大地提升了應用性能，並使得開發者在編寫代碼時更加靈活且直觀。這篇文章將深入介紹 Vue 3 中的兩個核心 API：ref 和 reactive，並探討它們如何從根本上改變響應式編程的方式。

Vue 2 的響應式系統

在深入了解 Vue 3 之前，我們先回顧一下 Vue 2 的響應式系統。Vue 2 使用的是基於「劫持（getter/setter）」的響應式系統，這是通過 Object.defineProperty 來實現的。Vue 會劫持對數據對象的屬性訪問，並在屬性值發生變化時通知相應的視圖更新。

然而，Vue 2 的響應式系統有一些限制，例如：

• 無法監聽數組的特定變動，如索引修改。
• 對象的新增屬性不會觸發更新。
• 如果項目比較大，Vue 2 的深度監測會導致性能問題。
  為了解決這些問題，Vue 3 引入了全新的 Proxy API 並優化了整個響應式系統。

Vue 3 中的響應式系統

在 Vue 3 中，核心變革之一就是使用 ES6 的 Proxy 來重寫響應式系統。Proxy 可以監聽對象的所有操作，從而實現更強大和靈活的數據變更監聽機制。此外，Vue 3 引入了兩個重要的 API：ref 和 reactive，這使得響應式數據管理更加靈活、簡單。

Proxy 的優點

• 可以監測對象屬性的新增和刪除。
• 支持對象的深度監聽，無需顯式地遞歸。
• 可以更好地處理數組的變更，如索引的修改。

ref：管理基本類型的響應性

ref 是 Vue 3 中用來處理基本類型響應式數據的 API。Vue 2 的響應式系統是基於對象的，這意味著 Vue 2 無法直接對基本數據類型（如 number、string、boolean 等）進行監控。ref 解決了這個問題，讓基本類型數據也能享受 Vue 的響應式系統。

如何使用 ref
在 Vue 3 中，你可以使用 ref 來定義響應式的基本類型數據：

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0); // count 是響應式數據

    function increment() {
      count.value++; // 修改數據時使用 .value
    }

    return {
      count,
      increment
    };
  }
};

在這個例子中，count 是一個響應式的 ref 對象，它持有一個初始值 0。當我們修改 count 時，需要通過 .value 來訪問和更新其值。這與 Vue 2 的雙向綁定不同，但更具靈活性，並且適合組合式 API 的使用場景。

ref 的應用場景
ref 的主要應用場景是管理簡單的、基礎的數據類型，如 number、string 或 boolean。此外，它也可以用於對 DOM 元素的引用操作。

例如，如果需要引用某個 DOM 元素來執行一些 DOM 操作，可以使用 ref：

<template>
  <div ref="myDiv">Hello World</div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const myDiv = ref(null);

    onMounted(() => {
      console.log(myDiv.value); // 獲取 DOM 元素
    });

    return { myDiv };
  }
};
</script>

reactive：對象的響應性

reactive 是用來處理複雜的數據結構，如對象和數組。它會將整個對象變為響應式的，這意味著對這個對象的任何修改（無論是屬性值的修改還是新增/刪除屬性）都能被 Vue 監測到並觸發更新。

如何使用 reactive
reactive 可以用來包裹一個普通對象，讓它變成響應式：

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      message: 'Hello Vue 3'
    });

    function increment() {
      state.count++;
    }

    return {
      state,
      increment
    };
  }
};

這裡的 state 是一個響應式的對象。當我們修改 state.count 時，Vue 會自動監測到這個變化並更新視圖。與 ref 不同的是，我們不需要使用 .value 來訪問或修改 reactive 對象內的屬性，這讓對象的響應性變得更加自然。

reactive 的應用場景
reactive 的主要應用場景是管理複雜的數據結構，如嵌套的對象和數組。這種情況下，reactive 比 ref 更直觀，因為它可以將整個對象變為響應式，而不需要對每個屬性單獨進行處理。

例如，當我們處理一個含有多個屬性的數據對象時，reactive 能夠更好地處理這些屬性的更新：

const user = reactive({
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    zip: '10001'
  }
});

user.age = 31; // 直接修改屬性
user.address.city = 'San Francisco'; // 嵌套屬性的修改也會被監測

ref 和 reactive 的區別

ref 和 reactive 都能創建響應式數據，但它們適用於不同的場景：

• ref：適合用於基本數據類型（如 number、string、boolean）和單一變量。它通過 .value 來訪問和修改數據。

• reactive：適合用於對象和數組，它能夠將整個對象變為響應式，不需要使用 .value 來訪問或修改屬性。

此外，還有一個特別的情況，如果你將一個 ref 包裹的對象傳遞給 reactive，Vue 會自動將其展開為響應式對象：

const count = ref(0);
const state = reactive({ count });

console.log(state.count); // 自動解包

這讓 ref 和 reactive 可以很好地配合使用。

結論

Vue 3 的響應式系統通過 ref 和 reactive 提供了更靈活和高效的數據管理方式。ref 更適合基礎類型的響應性處理，而 reactive 則適用於複雜的對象和數組。這兩者共同構成了 Vue 3 的響應式系統核心，讓開發者能夠更加直觀地操作響應式數據，並提升了應用的性能和開發體驗。